<template>
  <vxe-modal 
    ref="modalRef"
    v-model="show" 
    :id="id" 
    :lock-view="false" 
    :mask="false"
  >
    <template #title>
      <span>告警</span>
    </template>
    <template #default>
      <div class="alarm-dialog">
        <div class="alarm-dialog-item">
          <span>单位：</span>
          <span>本单位</span>
        </div>
        <div class="alarm-dialog-item">
          <span>单位：</span>
          <span>本单位</span>
        </div>
        <div class="alarm-dialog-item">
          <span>单位：</span>
          <span>本单位</span>
        </div>
        <div class="alarm-dialog-item">
          <span>单位：</span>
          <span>本单位</span>
        </div>
        <div class="alarm-dialog-item">
          <span>单位：</span>
          <span>本单位</span>
        </div>
      </div>
      <div class="alarm-dialog-action" @click="handleTo">去处理</div>
    </template>
  </vxe-modal>
</template>

<script setup>
import { ref, computed } from 'vue'

const props = defineProps(['id', 'visible'])
const emits = defineEmits();
const show = computed({
  get: () => props.visible,
  set: (value) => emits("update:visible", value)
})

const modalRef = ref(null)

const handleTo = () => { 
  modalRef.value && modalRef.value.close()
}

</script>

<style lang="scss">
.vxe-modal--wrapper .vxe-modal--header {
  background-color:rgb(188, 200, 212) !important;
}
.vxe-modal--body {
  background-color:rgb(188, 200, 212) !important;
}
.alarm-dialog {
  color: #fff;
  &-item {
    display: flex;
    border: 1px solid rgba(160, 160, 160, 0.6);
    border-bottom: none;
    height: 32px;
    line-height: 32px;
    width: 100%;
    padding: 0 15px;
    &:last-child {
      border: 1px solid rgba(160, 160, 160, 0.6);
    }
    span {
      &:first-child {
        color: rgba(255, 255, 255, 0.9);
        padding-right: 10px;
        border-right: 1px solid rgba(160, 160, 160, 0.6);
      }
      &:last-child {
        font-weight: 550;
        padding-left: 30px;
      }
    }
  }
  &-action {
    color: #fff;
    font-weight: 550;
    cursor: pointer;
    text-align: center;
    height: 34px;
    line-height: 34px;
    width: 100%;
    margin-top: 10px;
    border-radius: 4px;
    background-color:#abb0b3;
    &:hover {
      background-color:#767a7c;
    }
  }
}

</style>